<template>
  <div
    style="
      width: 100%;
      height: 100%;
      position: absolute;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      background: red;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    "
    :style="{
      background: 'url(' + require('../assets/loginPage.png') + ')',
    }"
  >
    <div
      style="
        color: white;
        position: absolute;
        height: 100%;
        width: 50%;
        top: 0px;
        right: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      "
    >
      <div style="font-size: 55px; font-weight: 900">深工融媒体播控系统</div>
      <div
        style="
          width: 50%;
          height: 500px;
          margin-top: 10px;
          border-radius: 10px;
          border: solid 2px #33a681;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <div style="width: 80%; text-align: left; margin: 10px 0">账号:</div>
        <input
          v-model="loginform.user_name"
          type="text"
          style="
            width: 80%;
            height: 30px;
            background: black;
            color: white;
            outline: 0;
            border: solid 2px #33a681;
          "
        />
        <div style="width: 80%; text-align: left; margin: 10px 0">密码:</div>
        <input
          v-model="loginform.password"
          type="password"
          style="
            width: 80%;
            height: 30px;
            background: black;
            color: white;
            outline: 0;
            border: solid 2px #33a681;
          "
        />
        <div
          style="
            width: 80%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0;
          "
        >
          <div style="display: flex; align-items: center">
            <label>
              <input
                v-model="rememberPassword"
                type="checkbox"
                name="option1"
                value="yes"
              />
              记住密码
            </label>
            <!-- <label>
              <input
                v-model="autoLogin"
                type="checkbox"
                name="option1"
                value="yes"
              />
              自动登录
            </label> -->
          </div>
          <div>无账号请联系管理员</div>
        </div>
        <button
          @click="login"
          style="
            background: #33a681;
            color: white;
            width: 200px;
            font-size: 20px;
            margin: 100px;
          "
        >
          登录
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      loginform: {
        user_name: null,
        password: null,
      },
      rememberPassword: false,
      autoLogin: false,
    };
  },
  methods: {
    async login() {
      let res = await request({
        url: "/user/api/userLogin",
        method: "POST",
        data: {
          command: 4,
          user_name: null,
          data: [this.loginform],
        },
      });
      if (res.data.status == 200) {
        localStorage.setItem("user_name", this.loginform.user_name);
        localStorage.setItem("password", this.loginform.password);
        localStorage.setItem("rememberPassword", this.rememberPassword);
        localStorage.setItem("autoLogin", this.autoLogin);
        this.$router.push("/home");
      }
    },
  },
  mounted() {
    this.rememberPassword = localStorage.getItem("rememberPassword");
    this.autoLogin = localStorage.getItem("autoLogin");
    if (this.rememberPassword) {
      this.loginform.user_name = localStorage.getItem("user_name");
      this.loginform.password = localStorage.getItem("password");
    }
    // if (this.autoLogin) {
    //   this.login()
    // }
  },
};
</script>

<style scoped>
</style>